<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>GameBox Cloud Core Tests</title>
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png" />
<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png" />
<link rel="manifest" href="/manifest.json" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="msapplication-TileImage" content="/mstile-144x144.png" />
<meta name="theme-color" content="#ffffff" />
<link rel="stylesheet" href="css/uikit.almost-flat.min.css" />
<link rel="stylesheet" href="css/notify.almost-flat.min.css" />
<link rel="stylesheet" href="css/custom.css">
<script type="application/javascript" src="js/jquery-2.1.3.min.js"></script>
<script type="application/javascript" src="js/uikit.min.js"></script>
<script type="application/javascript" src="js/notify.min.js"></script>
<script type="application/javascript" src="js/demo.js"></script>
</head>
<body>
<div id="demoapp" class="uk-container uk-container-center uk-margin-top uk-margin-large-bottom">

    <nav class="tm-navbar uk-navbar uk-navbar-attached">
        <div class="uk-navbar-brand uk-hidden-small">GameBox Cloud Core <div class="uk-badge uk-badge-success">v0.8.0</div></div>
        <ul class="uk-navbar-nav uk-hidden-small">
            <li>
                <a href="/">Welcome</a>
            </li>
            <li class="uk-active">
                <a href="/demo.html">Demo</a>
            </li>
            <li>
                <a href="https://github.com/dualface/gbc-docs/blob/master/src/guide/get-started.md" target="_blank">Documents</a>
            </li>
        </ul>

        <a href="#tm-offcanvas" class="uk-navbar-toggle uk-visible-small" data-uk-offcanvas></a>

        <div class="uk-navbar-brand uk-navbar-center uk-visible-small" style="padding: 0 !important; font-size: 16px !important;">Core <span class="uk-badge uk-badge-success">v0.8.0</span></div>
    </nav>

    <div class="uk-grid">
        <div class="uk-width-1-1">

            <div class="uk-panel uk-panel-box uk-panel-header uk-margin-top">
                <h3 class="uk-panel-title">Sign in GameBox Cloud Core</h3>
                <form class="uk-form uk-form-horizontal">
                <fieldset data-uk-margin>
                    <div class="uk-form-row">
                        <label class="uk-form-label" for="serverAddr">Server:</label>
                        <input class="uk-form-width-medium" type="text" id="serverAddr" placeholder="Server address" disabled />
                    </div>

                    <div class="uk-form-row">
                        <label class="uk-form-label" for="username">Name :</label>
                        <input class="uk-form-width-medium" type="text" id="username" placeholder="Your name" disabled />
                        <button class="uk-button" id="signInButton" onclick="return false;" disabled>Sign In</button>
                    </div>

                    <div class="uk-form-row">
                        <label class="uk-form-label" for="counterValue">Persistent session :</label>
                        <input class="uk-form-width-small" type="text" id="counterValue" placeholder="Sign in first" disabled />
                        <button class="uk-button" id="addCounterButton" onclick="return false;" disabled>Add Counter</button>
                    </div>
                </fieldset>
                </form>
            </div>

            <div class="uk-panel uk-panel-box uk-panel-header">
                <h3 class="uk-panel-title">Send message to user</h3>
                <form class="uk-form uk-form-horizontal">
                <fieldset data-uk-margin>
                    <div class="uk-form-row">
                        <label class="uk-form-label" for="selectUser">Online Users :</label>
                        <select id="selectUser" disabled></select>
                    </div>

                    <div class="uk-form-row">
                        <label class="uk-form-label" for="message">Message :</label>
                        <input class="uk-form-width-medium" type="text" id="message" placeholder="Enter message" value="hello"  disabled />
                        <button class="uk-button" id="sendMessageButton" onclick="return false;" disabled>Send</button>
                        <button class="uk-button" id="sendMessageToAllButton" onclick="return false;" disabled>Send to All</button>
                    </div>
                </fieldset>
                </form>
            </div>

            <div class="uk-panel uk-panel-box uk-panel-header">
                <h3 class="uk-panel-title">Send message to Delay Job</h3>
                <form class="uk-form uk-form-horizontal">
                <fieldset data-uk-margin>
                    <div class="uk-form-row">
                        <label class="uk-form-label">Delay :</label>
                        <input type="radio" id="selectDelay1" name="selectDelay" value="1" checked disabled />
                        <label for="selectDelay1">1 second</label>
                        &nbsp;&nbsp;&nbsp;
                        <input type="radio" id="selectDelay2" name="selectDelay" value="5" disabled />
                        <label for="selectDelay2">5 seconds</label>
                        &nbsp;&nbsp;&nbsp;
                        <input type="radio" id="selectDelay3" name="selectDelay" value="10" disabled />
                        <label for="selectDelay3">10 seconds</label>
                    </div>

                    <div class="uk-form-row">
                        <label class="uk-form-label" for="jobMessage">Job Message :</label>
                        <input class="uk-form-width-medium" type="text" id="jobMessage" placeholder="Enter message" value="hello" disabled />
                        <button class="uk-button" id="sendJobMessageButton" onclick="return false;" disabled>Send to Job</button>
                    </div>
                </fieldset>
                </form>
            </div>

            <div class="uk-panel uk-panel-box uk-panel-header">
                <h3 class="uk-panel-title">Logs</h3>

                <pre id="log"></pre>
                <button class="uk-button" id="clearLogsButton" onclick="return false;">Clear Logs</button>
                <button class="uk-button" id="insertMarkButton" onclick="return false;">Insert Mark</button>
            </div>

        </div>

    </div>

    <div class="uk-modal" id="alertDialog">
        <div class="uk-modal-dialog">
            <a href="" class="uk-modal-close uk-close"></a>
            <div class="uk-modal-header">
                <h3>GameBox Cloud Core Demo</h3>
            </div>
            <p class="uk-text-danger">
                <i class="uk-icon-exclamation-circle uk-icon-medium uk-margin-right"></i>
                <span id="alertContents"></span>
            </p>
        </div>
    </div>

    <div id="tm-offcanvas" class="uk-offcanvas">
        <div class="uk-offcanvas-bar">
            <ul class="uk-nav uk-nav-offcanvas uk-nav-parent-icon" data-uk-nav>
                <li>
                    <a href="/">Welcome</a>
                </li>
                <li class="uk-active">
                    <a href="/demo.html">Demo</a>
                </li>
                <li>
                    <a href="/docs/index.html" target="_blank">Documents</a>
                </li>
            </ul>
        </div>
    </div>

</div>
</body>
<script>
$(document).ready(function () {
    var demoapp = new DemoApp($("#demoapp"));
    demoapp.init();
});
</script>
</html>
